<template>
  <view class="main" v-if="equipment != null">
    <view class="top-content">
      <image
        class="equipment-image"
        :lazy-load="true"
        :src="baseStaticUrl + '/static/my-img/shebei_1@2x.png'"
        mode="aspectFill"
      ></image>
      <view class="info-view">
        <text class="content">设备名称：{{ equipment.name }}</text>
        <text class="content"
          >编号：{{
            equipment.no !== null && equipment.no !== "" ? equipment.no : "暂无"
          }}</text
        >
        <text class="content"
          >型号：{{
            equipment.model !== null && equipment.model !== ""
              ? equipment.model
              : "暂无"
          }}</text
        >
        <text class="content"
          >出产日期：{{
            equipment.produceTime !== null && equipment.produceTime !== ""
              ? getDateTime(equipment.produceTime)
              : "暂无"
          }}</text
        >
        <text class="content">所属厂商：川润股份</text>
      </view>
    </view>
    <view class="line-view">
      <view class="line">
        <text class="content">维保结束：暂无</text>
      </view>
      <view class="line">
        <view class="content">
          <text>所属分类：</text>
          <view class="equipment-type-view" v-if="equipmentTypes.length !== 0">
            <view
              class="equipment-type"
              v-for="(equipmentType, equipmentTypeIndex) in equipmentTypes"
              :key="equipmentTypeIndex"
            >
              <text
                class="equipment-type-text"
                :class="[isEditEquipmentType ? 'delete-operation' : '']"
                @click="deleteEquipmentType(equipmentType)"
              >
                {{ equipmentType }}
                <text v-if="isEditEquipmentType" class="delete">x</text>
              </text>
              {{ equipmentTypeIndex !== equipmentTypes.length - 1 ? "，" : "" }}
            </view>
          </view>
          <text v-else> 未分类 </text>
          <!-- <view v-if="isEditEquipmentType" class="add" @click="equipmentTypeSelectShow = true">
						<image :lazy-load="true" class="image" src="https://weitongshu.oss-cn-shenzhen.aliyuncs.com/runboshi/plus.png" mode="widthFix"></image>
						<text class="content">新增</text>
						<u-select v-model="equipmentTypeSelectShow" mode="mutil-column-auto" :list="equipmentTypeOptions" @confirm="equipmentTypeSelectConfirm"></u-select>
					</view>
					<view class="edit" @click="isEditEquipmentType = !isEditEquipmentType">
						<image :lazy-load="true" class="image" src="https://weitongshu.oss-cn-shenzhen.aliyuncs.com/runboshi/edit.png" mode="widthFix"></image>
						<text class="content">{{ isEditEquipmentType ? '完成' : '编辑'}}</text>
					</view> -->
        </view>
        <image
          class="right-icon"
          :lazy-load="true"
          :src="baseStaticUrl + '/static/my-img/shebei_arrow@2x.png'"
          mode="widthFix"
        ></image>
      </view>
      <view class="line">
        <text class="content"
          >设备维护人员：{{
            equipment.responsibilityEngineer !== null &&
            equipment.responsibilityEngineer !== ""
              ? equipment.responsibilityEngineer
              : "暂无"
          }}</text
        >
        <image
          class="right-icon"
          :lazy-load="true"
          :src="baseStaticUrl + '/static/my-img/shebei_arrow@2x.png'"
          mode="widthFix"
        ></image>
      </view>
    </view>
    <view class="btns">
      <view
        class="btn"
        @click="openPage('/pages/service-record/service-record')"
      >
        <image
          class="left-icon"
          :lazy-load="true"
          :src="baseStaticUrl + '/static/my-img/shebei_fuwu@2x.png'"
          mode="widthFix"
        ></image>
        <text class="content">服务申请记录</text>
        <image
          class="right-icon"
          :lazy-load="true"
          :src="baseStaticUrl + '/static/my-img/shebei_arrow@2x.png'"
          mode="widthFix"
        ></image>
      </view>
      <view
        class="btn"
        @click="openPage('/pages/maintenance-record/maintenance-record')"
      >
        <image
          class="left-icon"
          :lazy-load="true"
          :src="baseStaticUrl + '/static/my-img/shebei_weihu@2x.png'"
          mode="widthFix"
        ></image>
        <text class="content">维护记录</text>
        <image
          class="right-icon"
          :lazy-load="true"
          :src="baseStaticUrl + '/static/my-img/shebei_arrow@2x.png'"
          mode="widthFix"
        ></image>
      </view>
    </view>
  </view>
</template>

<script>
const app = getApp();
import {
  getEquipmentTypeOptions,
  putEquipmentEquipmentType,
  deleteEquipmentEquipmentType,
} from "@/common/api/equipment-type.js";

export default {
  data() {
    return {
      baseStaticUrl: "",
      equipment: null,

      equipmentTypeSelectShow: false,
      equipmentTypeOptions: [],
      isEditEquipmentType: false,
      currentEquipmentTypeName: "",
      deleteTypeViewShow: false,
      equipmentTypes: [],
    };
  },
  async onLoad(e) {
    if (e.equipment !== undefined) {
      this.equipment = JSON.parse(decodeURIComponent(e.equipment));
      this.equipmentTypes = this.equipment.equipmentType
        .split(",")
        .filter((item) => item !== "");
    }
    this.init();
    await this.initData();
  },
  methods: {
    init() {
      this.baseStaticUrl = app.globalData.baseStaticUrl;
    },
    async initData() {
      await this.getEquipmentTypeOptions();
    },
    async getEquipmentTypeOptions() {
      await getEquipmentTypeOptions().then((response) => {
        this.equipmentTypeOptions = response;
      });
    },
    async equipmentTypeSelectConfirm(e) {
      if (e[1] !== undefined) {
        await putEquipmentEquipmentType({
          equipmentId: this.equipment.id,
          equipmentTypeId: e[1].value,
        }).then((response) => {
          // 从UI上新增该分类
          this.equipmentTypes.push(e[1].label);

          this.$refs.uToast.show({
            title: "新增类型：" + e[1].label,
            type: "success",
            url: "",
          });
          uni.$emit("change-page", 2);
        });
      }
    },
    deleteEquipmentType(equipmentType) {
      if (this.isEditEquipmentType) {
        this.currentEquipmentTypeName = equipmentType;
        this.deleteTypeViewShow = true;
      }
    },
    async deleteEquipmentTypeConfirm() {
      await deleteEquipmentEquipmentType({
        equipmentId: this.equipment.id,
        equipmentTypeName: this.currentEquipmentTypeName,
      }).then((response) => {
        // 从UI上去除该分类
        this.equipmentTypes.splice(
          this.equipmentTypes.findIndex(
            (item) => item === this.currentEquipmentTypeName
          ),
          1
        );

        this.$refs.uToast.show({
          title: "删除分类 " + this.currentEquipmentTypeName + " 成功！",
          type: "success",
          url: "",
        });
        uni.$emit("change-page", 2);
      });
    },
    openPage(url) {
      uni.navigateTo({
        url:
          url +
          "?equipment=" +
          encodeURIComponent(JSON.stringify(this.equipment)),
        success: (res) => {},
        fail: () => {},
        complete: () => {},
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page,
.main {
  background-color: #fff;
  min-height: calc(100vh - var(--window-top));
}

.top-content {
  display: flex;
  flex-direction: row;
  padding: 30rpx;

  .equipment-image {
    width: 250rpx;
    height: 250rpx;
    // border: 3rpx dashed #e0e0e0;
  }
  .info-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 30rpx;

    .content {
      flex: 1;
      min-height: 56rpx;
      color: #333;
    }
  }
}
.line-view {
  border-top: 3rpx solid #d8d8d8;

  .line {
    border-bottom: 3rpx solid #d8d8d8;
    padding: 30rpx;
    display: flex;
    flex-direction: row;

    .content {
      color: #333;
      flex: 1;

      .equipment-type-view {
        display: inline;

        .equipment-type {
          display: inline;

          .equipment-type-text {
            &.delete-operation {
              border: 3rpx solid #f66;
              border-radius: 10rpx;
              padding: 0 5rpx;

              .delete {
                color: #f66;
                padding-left: 6rpx;
              }
            }
          }
        }
      }
      .edit {
        // flex: 1;
        // text-align: right;

        .image {
          width: 20rpx;
          vertical-align: middle;
          margin-right: 5rpx;
        }
        .content {
          color: #ff740b;
          font-size: 26rpx;
          line-height: 60rpx;
        }
      }
      .add {
        // flex: 1;
        // text-align: right;
        margin-right: 20rpx;

        .image {
          width: 20rpx;
          vertical-align: middle;
          margin-right: 5rpx;
        }
        .content {
          color: #99f;
          font-size: 26rpx;
          line-height: 60rpx;
        }
      }
    }
    .right-icon {
      width: 30rpx;
      margin: auto;
    }
  }
}
.btns {
  padding: 40rpx 30rpx;
  display: flex;
  flex-direction: row;

  .btn {
    flex: 1;
    // border: 3rpx solid #e0e0e0;
    box-shadow: 0 0 16rpx #ddd;
    display: flex;
    flex-direction: row;
    padding: 30rpx 20rpx;
    border-radius: 10rpx;

    &:nth-child(2n-1) {
      margin-right: 20rpx;
    }
    .left-icon {
      width: 50rpx;
      margin: auto;
    }
    .content {
      flex: 1;
      color: #333;
      margin: auto;
      padding-left: 20rpx;
    }
    .right-icon {
      width: 30rpx;
      margin: auto;
    }
  }
}
</style>